<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>市级单位北京市优秀退役军人</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style type="text/css" media="screen">
      * {
        box-sizing: border-box;
      }

      body {
        font-family: "Noto";
      }

      header {
        /* padding-top: 1.4rem; */
        padding-top: 1.55rem;
        height: 6.24rem;
        background-image: url('./images/bjt2_.png');
        background-size: cover;
      }

      .logo {
        margin: 0 auto;
      }

      .logo img {
        height: 1.07rem;
        /* height: 0.72rem; */
        display: block;
        margin: 0 auto;
      }

      header .name {
        width: 80%;
        margin: 0 auto;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        font-size: 0.72rem;
        /* margin-top: 0.5rem; */
        margin-top: 0.15rem;
        line-height: 0.55rem;
        height: 1.44rem;
        position: relative;
      }

      header .name i {
        font-style: normal;
      }

      header .name span {
        line-height: initial;
        padding: 0.05rem 0.2rem;
        margin: 0 auto;
        display: inline-block;
        margin-top: 0.165rem;
        font-size: 0.28rem;
        background-color: #ff7f00;
      }

      .head-grod {
        color: #ffffff;
        font-family: "Noto";
        font-weight: 700;
        text-align: center;
        font-size: 0.24rem;
        margin-top: 1.46rem;
        line-height: 0.42rem;
      }

      .main {
        margin-top: -0.4rem;
        padding-bottom: 0.43rem;
        background-color: #c32000;
        background: -webkit-linear-gradient(top, #c32000 60%, #fa8313) no-repeat;

      }

      .main .container {
        width: 6.86rem;
        margin: 0 auto;
        padding: 0.2rem 0;
        background-color: #e5302a;
        box-shadow: 0px 11px 50px 0px rgba(49, 20, 18, 0.1);
        border-radius: 10px;
      }

      .main .main-inner {
        width: 6.43rem;
        padding: 0.18rem;
        margin: 0 auto;
        background-color: #fbfbf3;
        box-shadow: 0px 4px 34px 0px rgba(49, 20, 18, 0.15);
        border-radius: 4px;
      }

      .main-container {
        border: solid 0.01rem #e6a7a1;
        padding: 0 0.3rem;
        position: relative;
      }

      .main-container::after,
      .main-container::before {
        content: "";
        display: block;
        width: 0.2rem;
        height: 0.2rem;
        position: absolute;
        background-color: #fbfbf3;
        border: solid 0.01rem #e6a7a1;
      }

      .main-container::after {
        bottom: -0.01rem;
        left: -0.01rem;
        border-left: 0;
        border-bottom: 0;
      }

      .main-container::before {
        bottom: -0.01rem;
        right: -0.01rem;
        border-right: 0;
        border-bottom: 0;
      }

      .cont-box {
        position: relative;
      }

      .main .main-inner .title {
        width: 7.22rem;
        position: absolute;
        left: 50%;
        top: auto;
        transform: translateX(-50%);
      }

      .main .main-inner .cont-box:first-of-type .title{
        top: -0.6rem;
      }
      
      .main .main-inner .top-auto {
      }

      .main .main-inner .title>img {
        width: 100%;
        display: block;
      }

      .main .main-inner .box-txt {
        font-size: 0.3rem;
        padding-top: 1.5rem;
        margin-bottom: 0.3rem;
        color: #490004;
        /*font-family: "Noto Sans CJK";*/
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
        font-weight: normal;
        text-shadow: 0px 0px #000;
        line-height: 0.5rem;
      }

      .main .main-inner .cont-box:first-of-type .box-txt {
        padding-top: 0.9rem;
      }











      .main-loading {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #c32000;
        background: -webkit-linear-gradient(top, #c32000 60%, #fa8313) no-repeat;
        z-index: 99
      }

      .main-loading .loading-con {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -40px;
        margin-top: -40px;
        width: 96px;
        height: 96px
      }

      .main-loading .loading-circle {
        width: 96px;
        height: 96px;
        border-top: 8px solid #11994b;
        border-right: 8px solid #f2a808;
        border-bottom: 8px solid #2399e7;
        border-left: 8px solid #c0392b;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -webkit-animation: spin 1s infinite linear;
        -moz-animation: spin 1s infinite linear;
        animation: spin 1s infinite linear
      }

      @keyframes spin {
        0% {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          transform: rotate(0deg)
        }

        100% {
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          transform: rotate(360deg)
        }
      }

      @-moz-keyframes spin {
        0% {
          -moz-transform: rotate(0deg)
        }

        100% {
          -moz-transform: rotate(360deg)
        }
      }

      @-webkit-keyframes spin {
        0% {
          -webkit-transform: rotate(0deg)
        }

        100% {
          -webkit-transform: rotate(360deg)
        }
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <header>
        <div class="logo">
          <img src="./images/head-ig/head-ig1.png" alt="">
        </div>
        <h1 class="name"><i>西城区退役军人事务局西城区退役军人事务局</i>
          <p>
            <span>全国规范退役军人</span>
          </p>
        </h1>
      </header>
      <div class="main">
        <div class="container">
          <div class="main-inner">
            <div class="main-container">
              <div class="cont-box">
                <div class="title">
                  <img src="./images/cont-title-bg-jb.png" alt="">
                </div>
                <p class="box-txt">男，1940年8月出生，汉族，籍贯河北省涞县，中共党员，1993年11月入伍，2004年6月退休。退役前为总装备部921工程办公室工程总体室高级工程师，正师职，现为北京市军队离休退休干部阳光休养所军队离退休干部。</p>
              </div>
              <div class="cont-box">
                <div class="title top-auto">
                  <img src="./images/cont-title-bg-ch.png" alt="">
                </div>
                <p class="box-txt pt-150">荣立三等功一次，2004年荣获国家科学技术进步奖，1991年荣获“八六三计划”先进工作者，获国家科技进步三等奖，“长征二号卫星运载器总体设计”获全国科学大会奖，均为主要完成人，
                  1996年获科工委软科学科技进步二等奖，署名第四等，获得多种奖项，享受1997年度政府特殊津贴。</p>
              </div>
              <div class="cont-box">
                <div class="title top-auto">
                  <img src="./images/cont-title-bg-jy.png" alt="">
                </div>
                <p class="box-txt pt-150">邸乃庸，原总装备部921工程办公室工程总体室高级工程师，长期从事我国战略导弹，运载火箭的总体设计工作，退休以后，依然用共产党员的标准严格要求自己，发挥余热，奉献社会。坚持从事航天科普教育工作，本人为“钱学森青少年航天科学院”专家，参与培养航天后备人才工作。受聘参加“航天科普大讲堂讲师团”，为讲师团首批成员，向广大青少年宣传我国航天成就，普及航天知识。受邀在北京、天津、广州等地的许多中学、大学、科技馆和腾讯公司作过多场报告。其所写载人航天科普文章在杂志发表，广受好评。</p>
              </div>
            </div>
          </div>
        </div>
        <footer></footer>
      </div>
    </div>

    <div class="main-loading" id="main-loading">
      <div class="loading-con">
        <div class="loading-circle"></div>
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
      $("#main-loading").delay(500).fadeOut("normal", function() {
        $("html,body").removeClass("loading-process")
      })



      window.onload = function() {
        getRem(750, 100)
      };
      window.onresize = function() {
        getRem(750, 100)
      };

      function getRem(pwidth, prem) {
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth / pwidth * prem + "px";
      }

      /**
       * 修改文字 bug
       */
      var mainCont = document.querySelector(".main-inner")
      setTimeout(function() {
        mainCont.style.height = "auto"
      }, 200)

      /**
       * 判断顶部文字
       */
      var Title = document.querySelector(".name")
      var nameTitle = document.querySelector(".name i")
      console.log(nameTitle.innerText.length)
      if (nameTitle.innerText.length < 7) {
        Title.style.lineHeight = "inherit"
      }
      if (nameTitle.innerText.length > 7) {
        nameTitle.style.fontSize = "0.5rem"
      }
      if (nameTitle.innerText.length > 20) {
        nameTitle.style.fontSize = "0.4rem"
      }
    </script>
  </body>
</html>
